<!DOCTYPE html>
<html lang="en">

<!-- template:var server_name="Blink" server_version="1.0.0" github_url="https://github.com/dexter-xD/tcp_server_c" buy_me_a_coffee_url="https://buymeacoffee.com/trish07"-->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{server_name}} Server</title>
    <style>
        :root {
            --bg-primary: #0f0f0f;
            --bg-secondary: #171717;
            --card-bg: #1c1c1c;
            --accent-color: #5d5fef;
            --accent-hover: #4a4ae0;
            --text-primary: #f3f3f3;
            --text-secondary: #b0b0b0;
            --green: #2ed573;
            --green-bg: rgba(46, 213, 115, 0.15);
            --blue: #4f46e5;
            --blue-bg: rgba(79, 70, 229, 0.15);
            --code-bg: #252525;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.5;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .container {
            width: 90%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 0;
        }
        
        header {
            padding: 4rem 0 2rem;
            text-align: center;
        }
        
        .logo {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--accent-color);
            margin-bottom: 0.5rem;
            letter-spacing: -1px;
        }
        
        .tagline {
            color: var(--text-secondary);
            font-size: 1.1rem;
            font-weight: 400;
        }
        
        .content {
            flex: 1;
            padding: 1rem 0 3rem;
        }
        
        .card {
            background-color: var(--card-bg);
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .card-header {
            background-color: rgba(0, 0, 0, 0.2);
            padding: 1rem 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .card-header h2 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .card-body {
            padding: 1.5rem;
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .info-label {
            width: 110px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .info-value {
            font-weight: 500;
        }
        
        .status-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.8rem;
            font-weight: 500;
            line-height: 1;
        }
        
        .status-enabled {
            background-color: var(--green-bg);
            color: var(--green);
        }
        
        .status-active {
            background-color: var(--blue-bg);
            color: var(--blue);
        }
        
        .example-list {
            list-style: none;
        }
        
        .example-list li {
            margin-bottom: 0.75rem;
        }
        
        .example-list a {
            display: block;
            padding: 0.75rem 1rem;
            background-color: rgba(0, 0, 0, 0.2);
            color: var(--text-primary);
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.2s ease;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .example-list a:hover {
            background-color: var(--accent-color);
            transform: translateY(-2px);
        }
        
        .feature {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.25rem;
        }
        
        .feature:last-child {
            margin-bottom: 0;
        }
        
        .feature-icon {
            width: 36px;
            height: 36px;
            background-color: rgba(79, 70, 229, 0.15);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            color: var(--accent-color);
            font-size: 1.1rem;
            flex-shrink: 0;
        }
        
        .feature-content h3 {
            margin: 0 0 0.3rem;
            font-size: 1rem;
            font-weight: 600;
        }
        
        .feature-content p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        footer {
        text-align: center;
        padding: 1.5rem 0;
        background-color: var(--bg-secondary);
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin-top: auto;
    }
    
    footer .container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    
    .footer-link {
        color: var(--accent-color);
        text-decoration: none;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        transition: color 0.2s ease;
    }
    
    .footer-link:hover {
        color: var(--accent-hover);
    }
    
    .footer-icon {
        width: 16px;
        height: 16px;
    }
        
        /* Code and usage styles */
        .code-block {
            background-color: var(--code-bg);
            border-radius: 6px;
            padding: 1rem;
            margin: 1rem 0;
            overflow-x: auto;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 0.9rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .command {
            display: inline-block;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 0.85rem;
        }
        
        .usage-list {
            list-style: none;
            margin: 0.5rem 0 1rem;
        }
        
        .usage-list li {
            margin-bottom: 0.5rem;
            display: flex;
        }
        
        .option {
            min-width: 170px;
            color: var(--accent-color);
            font-weight: 500;
            display: inline-block;
            padding-right: 1rem;
        }
        
        .usage-example {
            margin: 1rem 0;
        }
        
        .usage-example h4 {
            margin-bottom: 0.5rem;
            font-size: 1rem;
            font-weight: 500;
        }
        
        @media (max-width: 768px) {
            .info-grid {
                grid-template-columns: 1fr;
            }
            
            .grid {
                grid-template-columns: 1fr;
            }
            
            .logo {
                font-size: 2.5rem;
            }
            
            .usage-list li {
                flex-direction: column;
            }
            
            .option {
                margin-bottom: 0.25rem;
            }
        }
    </style>
</head>

<body>
    <header>
        <div class="container">
            <h1 class="logo">{{server_name}}</h1>
            <p class="tagline">Lightweight templating web server with hot reload</p>
        </div>
    </header>

    <div class="container content">
        <div class="card">
            <div class="card-header">
                <h2>Server Status</h2>
            </div>
            <div class="card-body">
                <div class="info-grid">
                    <div>
                        <div class="info-item">
                            <span class="info-label">Name:</span>
                            <span class="info-value">{{server_name}}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Version:</span>
                            <span class="info-value">{{server_version}}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Port:</span>
                            <span class="info-value">{{port}}</span>
                        </div>
                    </div>
                    <div>
                        <div class="info-item">
                            <span class="info-label">Templates:</span>
                            <span class="info-value">
                                {% if enable_templates %}
                                <span class="status-badge status-enabled">Enabled</span>
                                {% else %}
                                <span class="status-badge status-disabled">Disabled</span>
                                {% endif %}
                            </span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Hot Reload:</span>
                            <span class="info-value">
                                <span class="status-badge status-enabled">Enabled</span>
                            </span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">WebSocket:</span>
                            <span class="info-value">
                                <span class="status-badge status-active">Active at /ws</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2>Command-Line Usage</h2>
            </div>
            <div class="card-body">
                <p>Start the server with the following command:</p>
                <div class="code-block">./bin/blink</div>
                
                <ul class="usage-list">
                    <li>
                        <span class="option">-p, --port PORT</span>
                        <span>Specify port number (default: 8080)</span>
                    </li>
                    <li>
                        <span class="option">-s, --serve FILE</span>
                        <span>Specify a custom HTML file to serve</span>
                    </li>
                    <li>
                        <span class="option">-n, --no-templates</span>
                        <span>Disable template processing</span>
                    </li>
                    <li>
                        <span class="option">-h, --help</span>
                        <span>Display this help message</span>
                    </li>
                </ul>
                
                <div class="usage-example">
                    <h4>Examples:</h4>
                    <p>Default startup (port 8080):</p>
                    <div class="code-block">./bin/blink</div>
                    
                    <p>Use a different port:</p>
                    <div class="code-block">./bin/blink -s my-page.html -p 8081</div>
                    
                    <p>Serve a specific HTML file with templates disabled:</p>
                    <div class="code-block">./bin/blink --serve my-page.html -n</div>
                </div>
            </div>
        </div>

        <div class="grid">
            <div class="card">
                <div class="card-header">
                    <h2>Template Examples</h2>
                </div>
                <div class="card-body">
                    <ul class="example-list">
                        <li><a href="/variables">Variables</a></li>
                        <li><a href="/conditionals">Conditionals</a></li>
                        <li><a href="/loops">Loops</a></li>
                        <li><a href="/conditional-loops">Conditional Loops</a></li>
                        <li><a href="/sql">SQLITE</a></li>
                    </ul>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2>Key Features</h2>
                </div>
                <div class="card-body">
                    <div class="feature">
                        <div class="feature-icon">🔄</div>
                        <div class="feature-content">
                            <h3>Hot Reload</h3>
                            <p>Automatic browser refresh on HTML file changes</p>
                        </div>
                    </div>
                    
                    <div class="feature">
                        <div class="feature-icon">📝</div>
                        <div class="feature-content">
                            <h3>Templating</h3>
                            <p>Variables, conditionals, and loops in your HTML</p>
                        </div>
                    </div>
                    
                    <div class="feature">
                        <div class="feature-icon">📡</div>
                        <div class="feature-content">
                            <h3>WebSocket</h3>
                            <p>Native WebSocket support for real-time updates</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <span>{{server_name}} v{{server_version}}</span>
            <a class="footer-link" href="{{github_url}}" target="_blank">
                <svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
                </svg>
                View on GitHub
            </a>
            <a class="footer-link" href="{{buy_me_a_coffee_url}}" target="_blank">
                <svg class="footer-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z"/>
                </svg>
                Buy me a coffee
            </a>
        </div>
    </footer>
</body>
</html>